<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>渐变</title>
		<style type="text/css">
			.gradient-text-one {
				background-image: -webkit-linear-gradient(bottom, red, #fd8403, yellow);
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
			}

			.gradient-text-two {
				color: red;
			}

			.gradient-text-two[data-content]::after {
				content: attr(data-content);
				display: block;
				position: absolute;
				color: yellow;
				left: 0;
				top: 0;
				z-index: 2;
				-webkit-mask-image: -webkit-gradient(linear, 0 0, 0 bottom, from(yellow), to(rgba(0, 0, 255, 0)));
			}
		</style>
	</head>
	<body>
		<div class="gradient-text-one">
			love-青春无悔
		</div>

	</body>
</html>
